<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    table {
        border: 1px solid black;
        border-collapse: collapse;
    }

    tr {
        background-color: mediumspringgreen;
    }

    thead > tr {
        background-color: cornflowerblue;
    }

    td {
        border: 1px solid black;
    }
</style>

<script>
    var clickObj;
    window.onload = function () {
        //初识化id为1的元素为点击的元素
        clickObj = document.getElementById('1');
        clickObj.style.backgroundColor = "white";
    }

    function changeColor(tr) {
        if (tr==clickObj){
            return;
        }
        //将点中元素背景设置为白色
        tr.style.backgroundColor = "white";
        //将上一次点中元素背景设置为绿色
        clickObj.style.backgroundColor = "mediumspringgreen";
        //更新点中的元素
        clickObj = tr;

    }
</script>
<body>
<table>
    <thead>
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>职位</td>
        <td>学历</td>
    </tr>
    </thead>
    <tbody>
    <tr id="1" onclick="changeColor(this)">
        <td>1</td>
        <td>赵云</td>
        <td>男</td>
        <td>28</td>
        <td>经理</td>
        <td>本科</td>
    </tr>
    <tr id="2" onclick="changeColor(this)">
        <td>2</td>
        <td>郭嘉</td>
        <td>男</td>
        <td>50</td>
        <td>经理</td>
        <td>硕士</td>
    </tr>
    <tr id="3" onclick="changeColor(this)">
        <td>3</td>
        <td>张飞</td>
        <td>男</td>
        <td>41</td>
        </td>
        <td>经理</td>
        <td>大专</td>
    </tr>
    </tbody>
</table>

</body>
</html>